<template>
  <div class="map-page h100">
    <div class="h100">
      <MyMap :mapOptions="mapOptions">
        <ToolWrap position="top-left">
          <BaseMap></BaseMap>
        </ToolWrap>
      </MyMap>
    </div>
  </div>
</template>

<script setup lang="ts" name="home">
import { MyMap, ToolWrap, BaseMap, createLayers } from '@/map/index';
import { View } from 'ol';

const mapOptions = {
  layers: [
    createLayers({
      type: 1,
      options: {
        url: 'http://t{0-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}',
      },
    }),
  ],
  view: new View({
    center: [13949045.7, 5853828.26],
    zoom: 10,
  }),
};
</script>

<style scoped lang="scss">
.map-page {
  position: relative;
}
</style>
